<template>
  <div class="defaultProject">
    <div class="box">
      <img src="../../assets/img/defaultPage/pic_zwxm.png" alt="">
      <p>欢迎使用Smart PTM，开始创建项目吧！</p>
    </div>
<!--    <div class="add-project-btn" @click="addProjectFn">新建项目</div>-->
    <transition name="fade">
      <addProject :data="data_addProject" v-if="data_addProject.is_show_addProject" @update="updateProjectList"></addProject>
    </transition>
  </div>
</template>

<script>
  import addProject from '@/components/addProject'

  export default {
    name: "DefaultProject",
    components: {
      addProject
    },
    data() {
      return {
        data_addProject: {
          is_show_addProject: false
        },
      }
    },
    methods: {
      //新建项目
      addProjectFn() {
        this.data_addProject.is_show_addProject = true;
      },
      //更新项目列表
      updateProjectList(){
        setTimeout(function () {
          window.location.reload();
        },1000);
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .defaultProject {
    width: calc(100% - 48px);
    background-color: #ffffff;
    height: calc(100% - 48px);
    position: absolute;
    left: 24px;
    top: 24px;
    >.box{
      width: 330px;
      height: 312px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
      > img {
        display: block;
        margin: 0 auto;
      }
      > p {
        font-size: 18px;
        padding-top: 39px;
        text-align: center;
        color: #96A2AA;
      }
      .add-project-btn {
        background-color: #ff8f2b;
        color: #ffffff;
        border-radius: 6px;
        width: 122px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        font-size: 16px;
        text-align: center;
        margin: 0 auto;
      }
    }




  }
</style>
